<template>
  <div>
    <el-dialog :title="`${$t('basic.stage')}：PH_TEM_${tdIndex}`" :visible.sync="isShowTEM" :close-on-click-modal="false"
      :before-close="handleClose" :width="screenWidth > 1310 ? '55%' : '70%'" v-dialogDrag>
      <el-form :model="formData" label-width="70px" ref="ruleForm" size="mini" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="24" class="gz-form-row">
          <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="3">
            <el-form-item :label="$t('common.step_number')">
              <el-input v-model="formData.seqNo" disabled placeholder="" style="width: 70px" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="3">
            <el-form-item :label="$t('common.order')" label-width="40px">
              <el-input type="number" v-model="formData.stepSort" style="width: 55px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.isActive" @change="changeCheck">{{$t('common.enable')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.isAuto">{{$t('common.auto_start')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="8" :xl="5">
            <el-form-item :label="$t('common.start_delay')" label-width="80px" class="inputPadding">
              <el-input type="number" v-model="formData.delayTime">
                <template slot="append">min</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item :label="$t('basic.stage_name')" prop="phaseDesc">
              <el-input disabled v-model="formData.phaseDesc" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.mode">{{$t('common.operation_signature')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.checks">{{$t('common.review_confirmation')}}</el-checkbox>
            </el-form-item>
          </el-col>

        </el-row>
        <p style="margin-bottom:15px;font-weight: bold">下发参数：</p>
        <el-row :gutter="35">
          <el-col :xs="23" :sm="11" :md="10" :lg="6" :xl="4" style="padding-right:0">
            <el-form-item label="温度" class="append" prop="degrees">
              <el-input v-model="formData.degrees" placeholder="" type="number" keyup.native="isFloor">
                <template slot="append">℃</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="11" :sm="11" :md="10" :lg="4" :xl="4">
            <el-form-item label="HiHi" label-position="top" prop="hihi" label-width="45px" class="passLine">
              <el-checkbox v-model="formData.hihiActive" @change="handlehihi">
                <el-input type="number" keyup.native="isFloor" :disabled="!formData.hihiActive" v-model="formData.hihi"
                  placeholder=""></el-input>
              </el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="11" :sm="11" :md="10" :lg="4" :xl="4">
            <el-form-item label="Hi" label-position="top" prop="hi" label-width="35px" class="passLine">
              <el-checkbox v-model="formData.hiActive" @change="handlehi">
                <el-input type="number" keyup.native="isFloor" :disabled="!formData.hiActive" v-model="formData.hi"
                  placeholder=""></el-input>
              </el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="11" :sm="11" :md="10" :lg="4" :xl="4">
            <el-form-item label="Lo" label-position="top" prop="lo" label-width="35px" class="passLine">
              <el-checkbox v-model="formData.loActive" @change="handlelo">
                <el-input type="number" keyup.native="isFloor" :disabled="!formData.loActive" v-model="formData.lo"
                  placeholder=""></el-input>
              </el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="11" :sm="11" :md="10" :lg="4" :xl="5">
            <el-form-item label="LoLo" label-position="top" prop="lolo" label-width="45px" class="passLine">
              <el-checkbox v-model="formData.loloActive" @change="handlelolo">
                <el-input type="number" keyup.native="isFloor" :disabled="!formData.loloActive" v-model="formData.lolo"
                  placeholder=""></el-input>
              </el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="23" :sm="11" :md="10" :lg="6" :xl="4" style="padding-right:0">
            <el-form-item label="加热时间" class="append" prop="time">
              <el-input v-model="formData.time" placeholder="" type="number" v-enterNumber2>
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="23" :sm="11" :md="10" :lg="6" :xl="4">
                    <el-form-item :label="$t('recipe.start_delay')" class="append" prop="startDelay">
                        <el-input v-model="formData.startDelay" placeholder="" type="number" v-enterNumber2>
                            <template slot="append">分</template>
                        </el-input>
                    </el-form-item>
                </el-col> -->
        </el-row>
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label-width="0">
              <!-- <el-checkbox v-model="formData.confirm"> -->
              <p style="font-weight: bold">{{$t('recipe.phase_info')}}</p>
              <!-- </el-checkbox> -->
            </el-form-item>
          </el-col>
          <el-col :xs="23" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('common.operating_instructions')">
              <el-input rows="3" type="textarea" v-model="formData.guideInfo" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="23" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('basic.remarks')">
              <el-input type="textarea" rows="3" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :disabled="isreadOnly" :loading="loading"
          @click="handleConfirm('ruleForm')">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formula } from "@/api/formula"
export default {
  props: {
    isShowTEM: Boolean,
    tdIndex: Number,
    stepObj: Object,
    isreadOnly: Boolean
  },
  data () {
    let degreesFn = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('温度不能为空'));
      } else {
        if (this.formData.hiActive && (parseFloat(value) >= parseFloat(this.formData.hi))) {
          callback(new Error('温度值不能大于等于Hi'));
        } else if (!this.formData.hiActive && this.formData.hihiActive && (parseFloat(value) >= parseFloat(this.formData.hihi))) {
          callback(new Error('温度值不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let hihiFn = (rule, value, callback) => {
      if (this.formData.hihiActive && !value) {
        callback(new Error('请输入HiHi'));
      } else {
        callback();
      }
    }
    let hiFn = (rule, value, callback) => {
      if (this.formData.hiActive && !value) {
        callback(new Error('请输入Hi'));
      } else {
        if (this.formData.hihiActive && (parseFloat(value) >= parseFloat(this.formData.hihi))) {
          callback(new Error('Hi不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let loFn = (rule, value, callback) => {
      if (this.formData.loActive && !value) {
        callback(new Error('请输入Lo'));
      } else {
        if (this.formData.hiActive && (parseFloat(value) >= parseFloat(this.formData.hi))) {
          callback(new Error('Lo不能大于等于Hi'));
        } else if (parseFloat(value) >= parseFloat(this.formData.degrees)) {
          callback(new Error('Lo不能大于等于温度值'));
        } else if (!this.formData.hiActive && this.formData.hihiActive && (parseFloat(value) >= parseFloat(this.formData.hihi))) { //如果hi没填  hihi填了 则去和hihi比较
          callback(new Error('Lo不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let loloFn = (rule, value, callback) => {
      if (this.formData.loloActive && !value) {
        callback(new Error('请输入LoLo'));
      } else {
        if (this.formData.loActive && (parseFloat(value) >= parseFloat(this.formData.lo))) {
          callback(new Error('LoLo不能大于等于Lo'));
        } else if (!this.formData.loActive && (parseFloat(value) >= parseFloat(this.formData.degrees))) {
          callback(new Error('LoLo不能大于等于温度值'));
        } else if (!this.formData.loActive && this.formData.hiActive && (parseFloat(value) >= parseFloat(this.formData.hi))) {
          callback(new Error('LoLo不能大于等于Hi'));
        } else if (!this.formData.loActive && !this.formData.hiActive && this.formData.hihiActive && (parseFloat(value) >= parseFloat(this.formData.hihi))) {
          callback(new Error('LoLo不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let timeFn = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('加热时间不能为空'));
      } else {
        callback();
      }
    }
    return {
      screenWidth: document.body.clientWidth,
      formData: {
        phaseDesc: "温度控制",
        stepDesc: "",
        isActive: false,
        hihi: "",
        hihiActive: false,
        hi: "",
        hiActive: false,
        lo: "",
        loActive: false,
        lolo: "",
        loloActive: false,
        isAuto: false,
        degrees: "",
        confirm: "",
        flastModifyComment: "",
        guideInfo: "",
        // startDelay:"",
        time: "",
        delayTime: "",
        mode: false,
        checks: false,
        stepSort: 0,
      },
      loading: false,
      rules: {
        hihi: [{ validator: hihiFn, trigger: 'blur' }],
        hi: [{ validator: hiFn, trigger: 'blur' }],
        lo: [{ validator: loFn, trigger: 'blur' }],
        lolo: [{ validator: loloFn, trigger: 'blur' }],
        degrees: [{ validator: degreesFn, trigger: 'blur' }],
        time: [{ validator: timeFn, trigger: 'blur' }],
        // startDelay:[{ required: true, message: '请输入延时启动', trigger: 'blur' }],
        time: [{ required: true, message: '请输入加热时长', trigger: 'blur' }],
      },
      stepLoading: false,
      title: "添加",
      phaseLoading: false,
      stepId1: "",
      stepId2: ""
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
    tdIndex (val) {
      this.formData.seqNo = val
    },
    isShowTEM (val) {
      if (val) {
        this.formData.stepDesc = this.stepObj.stepDesc
        this.formData.isActive = this.stepObj.isActive == 1 ? true : false
        this.formData.seqNo = this.stepObj.seqNo
        this.formData.phaseDesc = this.stepObj.texts

        this.formData.stepNo = this.tdIndex
        this.formData.mode = this.stepObj.mode == 1 ? true : false
        this.formData.checks = this.stepObj.checks == 1 ? true : false
        this.formData.delayTime = this.stepObj.delayTime

        if (this.stepObj.fid) {
          this.phaseAutoFind()
        }
        this.formData.isAuto = this.stepObj.isAuto == 1 ? true : false
        this.phaseId = this.stepObj.fid
        this.formData.confirm = this.stepObj.confirm == 1 ? true : false
        this.formData.flastModifyComment = this.stepObj.flastModifyComment
        this.formData.guideInfo = this.stepObj.guideInfo
        this.formData.stepSort = this.stepObj.stepSort ?? 0
      } else {
        for (let key in this.formData) {
          this.formData[key] = ""
        }
        this.title = "添加"
        this.stepId1 = ""
        this.stepId2 = ""
      }
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  created () {

  },
  methods: {
    handleClose () {
      this.$refs["ruleForm"].resetFields();
      this.$emit("closePH", "TEM")
    },
    phaseAutoFind () {
      const param = {
        phaseId: this.stepObj.fid
      }
      formula.phaseAutoList(param).then(res => {
        if (res.code == 200) {
          if (res.data.rows.length > 0) {
            this.title = "编辑"
            this.formData.hihiActive = res.data.rows[0].hihiActive == 0 ? false : true
            this.formData.hiActive = res.data.rows[0].hiActive == 0 ? false : true
            this.formData.loloActive = res.data.rows[0].loloActive == 0 ? false : true
            this.formData.loActive = res.data.rows[0].loActive == 0 ? false : true
            this.formData.degrees = res.data.rows[0].target
            this.formData.hihi = res.data.rows[0].hihi
            this.formData.hi = res.data.rows[0].hi
            this.formData.lo = res.data.rows[0].lo
            this.formData.lolo = res.data.rows[0].lolo
            this.formData.time = res.data.rows[1].target
            this.stepId1 = res.data.rows[0].fid
            this.stepId2 = res.data.rows[1].fid
            // this.formData.startDelay =  res.data.rows[2].target
          }

        }
      })
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            phaseDesc: this.formData.phaseDesc,
            isAuto: this.formData.isAuto == false ? 0 : 1,
            isActive: this.formData.isActive == false ? 0 : 1,
            checks: this.formData.checks == false ? 0 : 1,
            delayTime: this.formData.delayTime,
            operationId: this.stepObj.operationId,
            type: this.stepObj.type,
            confirm: this.formData.confirm == false ? 0 : 1,
            flastModifyComment: this.formData.flastModifyComment,
            guideInfo: this.formData.guideInfo,
            mode: this.formData.mode == false ? 0 : 1,
            seqNo: this.stepObj.seqNo,
            stepNo: this.stepObj.stepNo,
            phaseCode: this.stepObj.phaseCode,
            serialNo: this.stepObj.serialNo,
            stepSort: this.formData.stepSort,
          }
          if (this.phaseId) {
            param.fid = this.phaseId
          }
          this.loading = true
          formula.phaseAdd(param).then(res => {
            if (res.code == 200) {
              this.handleSubmit()
            } else {
              this.$message.error(res.msg);
              this.loading = false
            }
          })
        }
      })
    },
    handleSubmit () {
      const param = [{
        paraName: "温度",
        uom: "℃",
        target: this.formData.degrees,
        hihi: this.formData.hihi,
        hihiActive: this.formData.hihiActive == false ? 0 : 1,
        hi: this.formData.hi,
        hiActive: this.formData.hiActive == false ? 0 : 1,
        lolo: this.formData.lolo,
        loloActive: this.formData.loloActive == false ? 0 : 1,
        lo: this.formData.lo,
        loActive: this.formData.loActive == false ? 0 : 1,
        phaseId: this.stepObj.fid,
      }, {
        paraName: "加热时间",
        uom: "分",
        target: this.formData.time,
        phaseId: this.stepObj.fid,
      }
        // ,{
        //     paraName:"启动延时",
        //     uom:"分",
        //     target:this.formData.startDelay,
        //     phaseId:this.stepObj.fid,
        // }
      ]
      if (this.title == "编辑") {
        param[0].fid = this.stepId1
        param[1].fid = this.stepId2
      }
      formula.phaseAutoAdd(param, this.title).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
          let obj = {
            mode: this.stepObj.mode,
            isAuto: this.formData.isAuto == false ? 0 : 1,
            isActive: this.formData.isActive == false ? 0 : 1,
            operationId: this.stepObj.operationId,
            seqNo: this.stepObj.seqNo,
            serialNo: this.stepObj.serialNo,
            text: this.stepObj.phaseDesc
          }
          this.$emit("uptionData", obj)
          this.$emit("closePH", "TEM")
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    changeCheck (val) {
      this.$forceUpdate()
    },
    handlehihi (val) {
      if (!val) {
        this.formData.hihi = ''
      }
    },
    handlehi (val) {
      if (!val) {
        this.formData.hi = ''
      }
    },
    handlelo (val) {
      if (!val) {
        this.formData.lo = ''
      }
    },
    handlelolo (val) {
      if (!val) {
        this.formData.lolo = ''
      }
    },
    isFloor () {
      var obj = event.target;
      var t = obj.value.charAt(0);
      obj.value = obj.value.replace(".", "$#$")//把第一个字符'.'替换成'$#$'
        .replace(/\./g, "")//把其余的字符'.'替换为空
        .replace("$#$", ".")//把字符'$#$'替换回原来的'.'
        .replace(/[^\d.]/g, "")//只能输入数字和'.'
        .replace(/^\./g, "")//不能以'.'开头
        .replace(/([0-9]+\.[0-9]{2})[0-9]*/, "$1")//只保留2位小数
      if (t == '-') {
        obj.value = '-' + obj.value;
      }
    }
  }
}
</script>

<style scoped>
.append >>> .el-input-group__append {
  padding: 0;
  width: 50px;
  text-align: center;
}
.passLine >>> .el-input__inner {
  padding: 0 7px;
}
</style>
